import { Col, Form, Input, Row, Select } from 'antd';
import React from 'react';
import { FORMAT } from '../settings';
import styles from '../styles.less';

function Formatter({ value, onChange }) {
  const { format, dateFormat } = value;

  return (
    <Row style={{ width: '100%' }}>
      <Col span={12} style={{ display: 'flex', alignItems: 'center' }}>
        <div className={styles.label}>预期格式</div>
        <div className={styles.item}>
          <Select
            value={format}
            onChange={v => onChange({ ...value, format: v, dateFormat: undefined })}
            allowClear
            style={{ width: 150 }}
            placeholder="请选择"
          >
            {FORMAT.map(item => {
              return (
                <Select.Option value={item.name} key={item.name}>
                  {item.title}
                </Select.Option>
              );
            })}
          </Select>
        </div>
      </Col>
      {format === 'DATE' ? (
        <Col span={12} style={{ display: 'flex', alignItems: 'center' }}>
          <div className={styles.label}>日期格式</div>
          <div className={styles.item}>
            <Input
              value={dateFormat}
              onChange={e => onChange({ ...value, dateFormat: e.target.value })}
              placeholder="yyyy-MM-dd HH:mm:ss"
            />
          </div>
        </Col>
      ) : null}
    </Row>
  );
}

export default Formatter;
